<#include "../layout/base.ftl">
<#macro header>
<script type="text/javascript">
    $(document).ready(function() {
        $("#loginForm").validate({
            errorLabelContainer : "#errorMessages",
            rules : {
                username : "required",
                password : "required"
            },
            messages : {
                username : {required : "请输入用户名！"},
                password : {required : "请输入密码！"}
            },
            submitHandler : function(){
                //以ajax方式到后台进行登录
                $("#loginForm").omAjaxSubmit({
                    url :'login',
                    beforeSubmit:function(){
                        //登录前为登录按钮添加loading效果
                        $('#login').addClass('status');
                    },
                    success:function(responseText,statusText, xhr, $form){
                        //登录后不管成功还是失败都去掉登录按钮的loading效果
                        $('#login').removeClass('status');
                        //如果登录成功转到主页面，如果登录失败把错误信息显示出来
                        if(responseText==='true'){
                            self.location.href='index';
                        }else{
                            $('#errorMessages').html(responseText).show();
                        }
                    }
                });
                return false;
            }
        });
    });
</script>
</#macro>

<#macro body>
<form id="loginForm" method="post">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2">
                <div id="errorMessages"></div>
            </td>
        </tr>
        <tr>
            <td width="75" align="right">
                <label>用户名：</label>
            </td>
            <td width="245">
                <input type="text" name="userName"/>
            </td>
        </tr>
        <tr>
            <td align="right">
                <label>密　码：</label>
            </td>
            <td>
                <input type="password" name="password"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="login" type="submit">登录</button>
            </td>
        </tr>
    </table>
</form>
</#macro>